<template>
  <div class="bread">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">Home</el-breadcrumb-item>
      <el-breadcrumb-item v-for="item in levelList" :key="item.name">{{
        item.meta.title
      }}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  data() {
    return {
      levelList: []
    }
  },
  watch: {
    $route() {
      this.getBreadcrumb() //监听路由变化
    }
  },
  created() {
    this.getBreadcrumb()
    // console.log(this.levelList)
  },
  methods: {
    getBreadcrumb() {
      let matched = this.$route.matched.filter((item) => item.name) //获取路由信息，并过滤保留路由名称信息存入数组
      console.log(matched)
      this.levelList = matched
    }
  }
}
</script>


<style lang="scss" scoped>
.bread {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-left: 20px;
  .el-breadcrumb-item:hover {
    color: #0c8c42 !important;
  }
}
</style>